package myJs.user.workflow.featureSelection.preprocess

import myJs.cps._
import myJs.tool.Tool
import myJs.tool.Tool._

import japgolly.scalajs.react.vdom.all._
import japgolly.scalajs.react._
import japgolly.scalajs.react.React.Fragment
import japgolly.scalajs.react.util.EffectCatsEffect._
import myJs.myPkg.Hooks._
import cats.effect._
import myJs.Implicits._
import myJs.Utils._

/** Created by yz on 3/11/2020
  */
object MyToolCp {

  case class Props(
      insertModule: String => SyncIO[Unit],
      removeModule: SyncIO[Unit]
  ) {
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    object FTool {

      def insertModule(moduleName: String) = {
        props.insertModule(moduleName)
      }

    }

    useEffect(
      SyncIO {
        Tool.popover
        ()
      },
      List()
    )

    div(
      className := "myTool",
      float.right,
      marginTop := "-20px",
      paddingRight := "0px",
      div(
        className := "btn-group",
        button(
          cursor.pointer,
          paddingRight := "0px",
          paddingLeft := "0px",
          paddingBottom := "0px",
          paddingTop := "0px",
          color := "#595959",
          fontSize := "12px",
          title := messages("insert"),
          className := "btn btn-link dropdown-toggle",
          dataToggle := "dropdown",
          i(className := "fa fa-plus-square")
        ),
        ul(
          className := "dropdown-menu dropdown-menu-right",
          role := "menu",
          marginTop := "6px",
          minWidth := "120px",
          AllCp.cps.toVdomArray { c =>
            li(key := s"${c.nameStr}", a(s"${messages(c.nameStr)}", onClick --> FTool.insertModule(c.nameStr)))
          }
        )
      ),
      button(
        cursor.pointer,
        paddingRight := "0px",
        paddingLeft := "0px",
        paddingBottom := "0px",
        paddingTop := "0px",
        color := "#595959",
        fontSize := "12px",
        title := messages("delete"),
        className := "btn btn-link",
        i(className := "fa fa-remove"),
        onClick --> props.removeModule
      )
    )

  }

}
